<!--
 * @Author: your name
 * @Date: 2021-08-02 05:03:43
 * @LastEditTime: 2022-01-04 15:33:07
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \aircityinit\src\components\Header\header.vue
-->
<template>
  <div class="header">
    <div class="tools">
      <a-button @click="addTag" type="primary" icon="ant-cloud">
        添加标签
      </a-button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  computed: {},
  watch: {},
  methods: {
    async addTag() {
      window.__g.marker.clear();
      //支持经纬度坐标和普通投影坐标两种类型
      let o = {
        id: "m1",
        coordinate: [20.092552185058594, 45.86786651611328, -35.0369987487793], //坐标位置
        coordinateType: 0, //默认0是投影坐标系，也可以设置为经纬度空间坐标系值为1
        anchors: [-16, 32], //锚点
        range: [10, 10000], //可视范围
        imagePath: window.HostConfig.Path + "/images/tag.png", //显示图片路径
        hoverImagePath: window.HostConfig.Path + "/images/hilightarea.png", // 鼠标悬停时显示的图片路径
        imageSize: [28, 28], //图片的尺寸
        fixedSize: true, //图片固定尺寸，取值范围：false 自适应，近大远小，true 固定尺寸，默认值：false

        text: "北京银行", //显示的文字
        useTextAnimation: true, //打开文字展开动画效果
        textRange: [100, 6000], //文本可视范围[近裁距离, 远裁距离]
        textOffset: [0, 0], // 文本偏移
        textBackgroundColor: window.Color.White, //文本背景颜色
        fontSize: 16, //字体大小
        fontOutlineSize: 0, //字体轮廓线大小
        fontColor: window.Color.Black, //字体颜色
        fontOutlineColor: window.Color.Black, //字体轮廓线颜色

        popupURL: window.HostConfig.Path + "/tag_popup.html", //弹窗HTML链接
        popupBackgroundColor: [1.0, 1.0, 1.0, 0.5], //弹窗背景颜色
        popupSize: [600, 400], //弹窗大小
        popupOffset: [0, 0], //弹窗偏移

        showLine: true, //标注点下方是否显示垂直牵引线
        lineSize: [2, 100], //垂直牵引线宽度和高度[width, height]
        lineColor: window.Color.SpringGreen, //垂直牵引线颜色
        lineOffset: [0, 0], //垂直牵引线偏移

        autoHidePopupWindow: true, //失去焦点后是否自动关闭弹出窗口
        autoHeight: false, // 自动判断下方是否有物体
        displayMode: 2, //显示模式
        priority: 0, //避让优先级
        occlusionCull: false, //是否参与遮挡剔除
      };
      await window.__g.marker.add(o);

      // o.id = "m2";
      // o.text = "招商银行";
      // o.coordinate = [495231.93, 2490962.25, 10.0];
      // window.__g.marker.add(o);
      // window.__g.marker.focus(o.id, 200, 2);
    },
  },
  created() {},
  mounted() {},
  beforeCreate() {},
  beforeMount() {},
  beforeUpdate() {},
  updated() {},
  beforeDestroy() {},
  destroyed() {},
  activated() {},
  components: {},
};
</script>

<style lang="scss" scoped>
.header {
  button {
    height: 60px;
  }
  width: 100%;
  height: 90px;
  background: rgba(66, 165, 160, 0.466);
  position: absolute;
  text-align: center;
  font-weight: 900;
  line-height: 90px;
  z-index: 100;
  .tools {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
  }
}
</style>
